import React, { useEffect, useState } from 'react';
import '../assets/css/Userinfo.css'
import {Form, Select, Button, Space, Table, Modal, message,Pagination } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {getAdvertisementList,getAdtypeList,getAdvertisementDelete} from '../apis/advertisement'
import {baceUrl} from '../utils/config'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import AdvertisementAdd from '../components/advertisement/AdvertisementAdd'

const Advertisement:React.FC =()=> {
    const [form] = Form.useForm();
    const [, forceUpdate] = useState({});
//表单查询
    const [selectList,getSelectList] = useState([])
    const getTypeList = async ()=>{
        const res:any = await getAdtypeList(params).catch()
        if(res&&res.errCode===10000){
            getSelectList(res.data.list)
        }
    }
    const onFinish = (values:any)=>{
        setParams(values)
    }
    const [selectionType, ] = useState<'checkbox' | 'radio'>('checkbox');
//表格
    //表格数据
    const [data,setDataList]: any= useState([]);
    const [params,setParams]:any = useState({
        page:1,
        psize:10,
        typeid:0
    })
    const [loading,setLoading] = useState(true)
    const getDatalist = async ()=>{
        const res:any = await getAdvertisementList(params)
        console.log(res)
        if(res.errCode===10000){
            setLoading(false)
            setDataList(res.data.list)
            setTotal(res.data.counts)
        }
    }
    //添加
    const [addShow,getAddShow]:any = useState<any>(false)
    const [listData,setListData]:any = useState({})
    const getUserAdd:any=(val?:any)=>{
        return ()=>{
            setListData(val)
            getAddShow(true)
        }
    }
    const getUserClose = ()=>{
        getAddShow(false)
        getDatalist()
    }
    //多选
    const rowSelection = {
        onChange: (selectedRowKeys:any, selectedRows:any) => {
            // setSelection(selectedRowKeys)
        },
        getCheckboxProps: (record:any) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    //删除
    const getDataDel:any = (key:number,id?:number)=>{
        return  ()=>{
            Modal.confirm({
                title: '提示',
                icon: <ExclamationCircleOutlined />,
                content: '确定要永久删除数据吗？',
                okText: '确认',
                cancelText: '取消',
                onOk:async()=>{
                    const res:any = await getAdvertisementDelete({id:id})
                    if(res.errCode===10000){
                        getDatalist()
                        message.success('删除成功', 10);
                    }else{
                        message.error(res.errMsg, 10);
                    }
                }
            });
        }
    }
    //分页
    const [total,setTotal] = useState(0)
    const changePagination = (page:any,pSize:any)=>{
        setParams({...params, page, psize: pSize})
    }
    //数据
    const columns: ColumnsType<any> = [
        {
            title: '标题',
            dataIndex: 'title',
            align:'center',
        },
        {
            title: '位置',
            dataIndex: 'typeName',
            align:'center',
        },
        {
            title: '图片',
            dataIndex: 'picture',
            align:'center',
            render:(_,record)=>(
                <Space size="middle">
                    <img className={record.picture?'imgUrls':'imgUrlHide'} src={baceUrl+record.picture} />
                </Space>
            )
        },
        {
            title: '排序',
            dataIndex: 'sort',
            align:'center',
        },
        {
            title: '状态',
            dataIndex: 'enabled',
            align:'center',
            width:120,
            render: (_,record)=>(
                <Space size="middle">
                    <div>{record.enabled===1?"显示":"不显示"}</div>
                </Space>
            )
        },
        {
            title: '操作',
            align:'center',
            width:'100px',
            render: (_, record) => (
                <Space size="middle">
                    <div className="funBtn examine" onClick={getUserAdd(record)}>修改</div>
                    <div className="funBtn del" onClick={getDataDel(1,record.id)}>删除</div>
                </Space>
            ),
        },
    ];
    useEffect(() => {
        forceUpdate({});
        getDatalist()
        getTypeList()
    }, [params]);
    return (
        <div className="userinfo">
            <div className="header">
                <span className="title">图片管理</span>
            </div>
            <div className="centnet">
                {/*  表单  */}
                <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
                    <Form.Item label="位置" name="typeid">
                        <Select
                            style={{width:'200px'}}
                            placeholder="请选择"
                            allowClear
                            optionFilterProp="children"
                            fieldNames={{label: 'name',value:'id'}}
                            options={selectList}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit" type="primary">查询</Button>
                    </Form.Item>
                </Form>
                {/*  按钮  */}
                <div className="btnBox">
                    <div className="funBtn" onClick={getUserAdd({id:0})}>添加</div>
                </div>
                {/*  表格  */}
                <Table
                    className="tableBox"
                    bordered
                    loading={loading}
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                    rowKey={record => record.id}
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                />
                <Pagination
                    className="Pagination"
                    total={total}
                    current={params.page}
                    defaultCurrent={params.page}
                    defaultPageSize={params.psize}
                    showSizeChanger
                    showQuickJumper
                    pageSizeOptions={[5,10,20,40]}
                    onChange={changePagination}
                    showTotal={total => `共${total}条`}
                />
            </div>
            {
                addShow &&
                <AdvertisementAdd
                    addShow={addShow}
                    listData={listData}
                    getUserClose={getUserClose}
                ></AdvertisementAdd>
            }
        </div>
    );
}

export default Advertisement;
